{extend name="public:layout" /}
{block name="title"}访问来源{/block}
{block name="head"}
<script src="/public/plugins/echarts/echarts-all.js"></script>
<style>
    .echarts {
        height: 400px;
    }
</style>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox" style="background: #fff;">
        {include file="cnzz/menu" /}
    </div>
    <div class="ibox-title">
        <a onclick="setDay(this)" data-type="1" class="btn btn-info">今日</a>
        <a onclick="setDay(this)" data-type="2" class="btn btn-white">昨日</a>
        <a onclick="setDay(this)" data-type="4" class="btn btn-white">最近7日</a>
        <a onclick="setDay(this)" data-type="5" class="btn btn-white">最近30日</a>
    </div>
    <div class="ibox-content">
        <div class="echarts" id="echarts-pie-chart"></div>
    </div>
</div>
<div class="ibox">
    <div class="ibox-content">
        <div class="echarts" id="echarts-line-chart"></div>
    </div>
</div>
{/block}
{block name="script"}
    <script>
        $(function(){
            getPie(1);
            getLine(1);
        })
        //组装饼图
        function getPie(type){
            getAjax("{:url('AjaxsourceChart')}",{type:type},function (data) {
                var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
                var pieoption = {
                    title : {
                        text: data[1].title.text,
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data:data[1].legend.data
                    },
                    calculable : true,
                    series : [
                        {
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:data[1].series.data
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            })
        }
        //组装折线图
        function getLine(type){
            getAjax("{:url('AjaxsourceChart')}",{type:type},function (lineData) {
                var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                var lineoption = {
                    title : {text: lineData[0].title.text},
                    tooltip : {trigger: 'axis'},
                    legend: {data:lineData[0].legend.data},
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : lineData[0].xAxis.data
                        }
                    ],
                    yAxis : [{type : 'value'}],
                    series : lineData[0].series
                };
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            })
        }
        
        function setDay(obj) {
            var type=$(obj).data('type');
            $(obj).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-white');
            $(obj).removeClass('btn-white');
            getPie(type);
            getLine(type);
        }
    </script>
{/block}